$dropdown: (
  'width': 100%,
);

$dropdown-readonly-text-item: (
  'color': getCssVar(form-item, text-color),
);

@include b(dropdown) {
  width: getCssVar('dropdown', 'width');
  @include set-component-css-var('dropdown', $dropdown);
  @include set-component-css-var('dropdown-readonly-text-item', $dropdown-readonly-text-item);

  // 父选项节点样式
  @include e(branch-node){
    >.el-tree-node__content {
      // 父节点禁用时文本还是正常颜色
      #{getCssVarName(color, disabled, text)}: getCssVar(color,text,0);
    }
  }

  .el-select {
    width: 100%;
  }
}

@include b(dropdown-readonly-text-item){
  margin-right: getCssVar(spacing, tight);
  font-size: getCssVar(form-item, font-size);
  line-height: getCssVar(editor, default, line-height);
  color: getCssVar(dropdown, readonly-text-item-color);

  @include b(icon){
    @include flex(row, center, center);

    width: getCssVar(width-icon, medium);
    height: getCssVar(width-icon, medium);
    margin-right: getCssVar(spacing, extra-tight);   
    font-size: getCssVar(font-size, regular);
  }
}

.el-select-dropdown__item{
  width: 100%;
  background-color: getCssVar(dropdown, select-option-item-bkcolor);
}

@include b(dropdown-select-option-content) {
  @include flex(row, flex-start, center);

  @include e(text) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @include b(icon){
    @include flex(row, center, center);

    width: getCssVar(width-icon, medium);
    height: getCssVar(width-icon, medium);
    margin-right: getCssVar(spacing, extra-tight);    
    font-size: getCssVar(font-size, regular);    
  }

  width: 100%;
  height: 100%;  
  color: getCssVar(dropdown, select-option-item-color);
}

// 表单下的下拉框默认显示，悬浮上去显示编辑器
@include b(dropdown-form-default-content){
  display: none;
}

@include b(form-item){

  @include b(dropdown) {
    @include when(show-default){
      // 悬浮显示编辑器
      &:hover{
        @include b(dropdown-form-default-content){
          display: none;
        }     
        @include b(dropdown-select){
          display: block;    
        }       
      }    
      
      // 不悬浮时显示信息态
      @include b(dropdown-form-default-content){
        display: flex;
        align-items: center;     
        width: 100%;
        padding: getCssVar(form-item, hover-edit-padding);
        font-family: Arial, sans-serif;;
        font-size: getCssVar(form-item, font-size);
        line-height: getCssVar(editor, default, line-height);
        color: getCssVar(form-item, text-color);
  
        @include when(multiple){
          height: getCssVar(editor, default, line-height);
          @include b(dropdown-content-item){
            height: 22px;
            padding: 0 9px;
            margin: 2px 6px 2px 0;
            font-size: getCssVar(font-size, small);
            line-height: 22px;
            color: getCssVar(editor, default, text-color);
            background-color: getCssVar(color, fill-0);
            border: 1px solid transparent;
            border-radius: getCssVar(border-radius, small);
          }
        }
      }
      @include b(dropdown-select){
        display: none;  
      }
      
      // 输入态
      @include when(editable){
        @include b(dropdown-form-default-content){
          display: none;
        }     
        @include b(dropdown-select){
          display: block;    
        }  
      }
    }    

  }
}